<template>
  <n-card content-style="padding: 6px 16px;" style="margin-top: 20px;">
    <n-list>
      <n-list-item>
        <n-thing title="发送消息" />
        <template #suffix>
          <n-select v-model:value="form.sendMsgKeyboard" :options="msgOptions" size="tiny" menu-size="tiny" :show-checkmark="false" />
        </template>
      </n-list-item>

      <n-list-item>
        <n-thing title="截图" />
        <template #suffix>
          <n-input v-model:value="form.screenShot" placeholder="" size="tiny" clearable style="width: 90px;" />
        </template>
      </n-list-item>

      <n-list-item>
        <n-thing title="锁定" />
        <template #suffix>
          <n-input v-model:value="form.lockScreenShot" placeholder="" size="tiny" clearable style="width: 90px;" />
        </template>
      </n-list-item>

      <n-list-item>
        <n-thing title="显示/隐藏微信窗口" />
        <template #suffix>
          <n-input v-model:value="form.toggleShowWindows" placeholder="" size="tiny" clearable style="width: 110px;" />
        </template>
      </n-list-item>

      <n-list-item>
        <n-thing title="" />
        <template #suffix>
          <n-button strong secondary size="small" @click="resetDefaultSetting">恢复默认设置</n-button>
        </template>
      </n-list-item>
    </n-list>
  </n-card>
</template>

<script setup>
import { ref } from "vue";

const form = ref({
  sendMsgKeyboard: '1',
  screenShot: 'Alt+A',
  lockScreenShot: 'Ctrl+L',
  toggleShowWindows: 'Ctrl+Alt+W'
});

const msgOptions = ref([
  { value: '1', label: 'Enter', },
  { value: '2',label: 'Ctrl+Enter', },
])

const resetDefaultSetting = () => {
  form.value = {
    sendMsgKeyboard: '1',
    screenShot: 'Alt+A',
    lockScreenShot: 'Ctrl+L',
    toggleShowWindows: 'Ctrl+Alt+W'
  }
}
</script>

<style lang="scss" scoped>
@use "@/assets/css/n-list-reset.scss";
</style>

